<script setup>
import {useRouter} from 'vue-router'
const router = useRouter()
const toDemo = () => {
  router.push({
    path: '/demo', // 路由地址
    query:{
      id: 111 // 路由参数
    }
  })
}
const toHello = () => {
  router.push({
    name:'hello',
    query:{
      id: 999 // 路由参数
    }
  })
}

</script>

<template>
  <div id="d1">
<div id="d2">
  <RouterLink to="/demo">去demo页面</RouterLink>
  <br>
  <RouterLink to="/hello">去hello页面</RouterLink>
  <br>
  <button @click="toDemo">demo</button>
  <el-button type="warning" round size="large">demo</el-button>
  <el-button type="warning" round >demo</el-button>
  <br>
  <button @click="toHello">hello</button>
</div>
    <div id="d3">
      <!--    表示当前路由指向哪，这里就是谁-->
      <RouterView/>
      <!--    div 包含了所有demo的内容-->
    </div>

  </div>
</template>

<style scoped>
#d1{
  display: flex;
}
#d2{
  width: 400px;
  height: 60px;
}
</style>
